// 饼图配置
import type { EChartsOption, BarSeriesOption, LineSeriesOption } from "echarts";

// 新增类型定义
interface DataItem {
  value: number;
  name: string;
  value2?: number;
}
type DataObject = {
  [key: string]: DataItem[];
};
export const createPieOptions = (data: DataItem[]): EChartsOption => ({
  tooltip: {
    trigger: "item",
    // 补充完整类型提示
    backgroundColor: "rgba(50,50,50,0.7)",
    borderColor: "#333",
    textStyle: {
      color: "#fff",
    },
  },
  grid: { top: 30, right: 20, bottom: 30, left: 30 },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      data: [...data],
      label: {
        formatter: "{b}: {d}%",
        // 补充完整标签样式类型
        color: "#666",
        fontSize: 12,
        fontWeight: "bold" as const, // 解决 TS 枚举类型校验
      },
      // 添加类型支持的动画配置
      animationType: "scale",
      animationEasing: "elasticOut",
    },
  ],
});

// 多折现图配置
export const createLineOptions = (data: DataObject): EChartsOption => {
  let xTexts = data[Object.keys(data)[0]].map((item) => item.name);
  const arr: LineSeriesOption[] = [];
  Object.keys(data).map((key) => {
    let yValues = data[key].map((item) => item.value);
    const series: LineSeriesOption = {
      name: key,
      type: "line",
      data: yValues,
    };
    arr.push(series);
  });
  return {
    grid: { top: 30, right: 30, bottom: 30, left: 50 },
    tooltip: {
      trigger: "axis",
      // 补充完整类型提示
      backgroundColor: "rgba(50,50,50,0.7)",
      borderColor: "#333",
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: {
      type: "category",
      data: xTexts,
    },
    yAxis: { type: "value" },
    series: [...arr],
  };
};

// 双柱图、单柱图配置
export const createBarOptions = (data: DataObject): EChartsOption => {
  let xTexts = data[Object.keys(data)[0]].map((item) => item.name);
  const arr: BarSeriesOption[] = [];
  Object.keys(data).map((key) => {
    let yValues = data[key].map((item) => item.value);
    const series: BarSeriesOption = {
      name: key,
      type: "bar",
      data: yValues,
    };
    arr.push(series);
  });
  return {
    grid: { top: 50, right: 30, bottom: 30, left: 50 },
    // 禁止图例的选中
    legend: {
      selectedMode: "multiple", // 允许多选
      top: 10
    },
    tooltip: { trigger: "axis" },
    xAxis: {
      type: "category",
      data: xTexts,
    },
    yAxis: { type: "value" },
    series: [...arr],
  };
};
export const createCellBarOptions = (data?: DataObject): EChartsOption => {
  var xAxisData = [];
  var data1 = [];
  var data2 = [];
  for (var i = 0; i < 100; i++) {
    xAxisData.push("A" + i);
    data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
    data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
  }
  return {
    grid: { top: 50, right: 30, bottom: 30, left: 50 },
    legend: {
      data: ["bar", "bar2"],
      top: 10
    },
    xAxis: {
      data: xAxisData,
      splitLine: {
        show: false,
      },
    },
    yAxis: {},
    series: [
      {
        name: "bar",
        type: "bar",
        data: data1,
        emphasis: {
          focus: "series",
        },
        animationDelay: function (idx: number) {
          return idx * 10;
        },
      },
      {
        name: "bar2",
        type: "bar",
        data: data2,
        emphasis: {
          focus: "series",
        },
        animationDelay: function (idx: number) {
          return idx * 10 + 100;
        },
      },
    ],
    animationEasing: "elasticOut",
    animationDelayUpdate: function (idx: number) {
      return idx * 5;
    },
  };
};
